<template>
	<div class="quote-wrap">
		<div class="content-wrap">
			<div class="quote-main" v-if="quoteList.length">
				<div
					class="table-wrap"
					:style="`width: ${columnsWidth}`"
					:id="id"
					:ref="id"
				>
					<div class="header">
						<div class="row">
							<div
								:class="['cell']"
								v-for="(e, i) in columns"
								:key="i"
								:style="{ width: e.class + 'rem' }"
							>
								<div class="val">
									{{ e.label }}
								</div>
							</div>
						</div>
					</div>
					<div class="body">
						<div class="row" v-for="(item, index) in quoteList" :key="item.id">
							<div
								:class="['cell']"
								v-for="(e, i) in columns"
								:style="{ width: e.class + 'rem' }"
								:key="i"
							>
								<div class="text">
									{{ e.prop === "index" ? index + 1 : item[e.prop] || "-" }}
								</div>
							</div>
						</div>
					</div>
					<div class="total-wrap">
						<div>共计{{ totalClassify }}个套件，{{ totalQty }}个产品</div>
						<div>
							<span class="p1">路费：{{ fee }}元</span>
							<span>总价：{{ totalSalePrice }}元</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn-wrap" v-if="type == ''">
			<!-- <div class="btn btn-list" data-action="getEnv">预览图片</div> -->
			<div class="btn" @click="exportExcel">
				<span>导出Excel</span>
				<i v-if="loading" class="el-icon-loading"></i>
			</div>
			<div class="btn" @click="onExport">
				<span>生成图片</span>
				<i v-if="loading" class="el-icon-loading"></i>
			</div>
		</div>
	</div>
</template>

<script>
import { html2Img } from "@/utils/index.js";

export default {
	data() {
		return {
			loading: false,
			id: "quoteRef",
			fee: 0,
			type: "",
			orderList: [],
			emptyUrl:
				"https://front-xps-cdn.xsyx.xyz/custom/stock-c/h5/prod_none.png",
			quoteList: [],
			orderInfo: {},
			columns: [
				{
					label: "序号",
					prop: "index",
					class: 80,
				},
				{
					label: "产品编码",
					prop: "productCode",
					class: 180,
				},
				{
					label: "产品名称",
					prop: "productName",
					class: 460,
				},
				{
					label: "规格",
					prop: "norms",
					class: 280,
				},
				{
					label: "单位",
					prop: "unit",
					class: 130,
				},
				{
					label: "颜色",
					prop: "colour",
					class: 130,
				},
				{
					label: "数量",
					prop: "count",
					class: 90,
				},
			],
		};
	},
	computed: {
		columnsWidth() {
			return this.columns.reduce((a, b) => a + b.class, 0) + "rem";
		},
		totalSalePrice() {
			const { mul, add } = this.$acc;
			return this.orderList.reduce(
				(a, b) => add(a, mul(b.count, b.salePrice)),
				0
			);
		},
		totalClassify() {
			return [...new Set(this.orderList.map((e) => e.id))].length;
		},
		totalQty() {
			return this.quoteList.reduce((a, b) => a + b.count, 0);
		},
	},
	beforeCreate() {
		let dom = document.getElementsByTagName("html");
		dom = dom[0] || dom;
		if (dom) dom.setAttribute("style", `font-size: ${dom.offsetWidth / 750}px`);
	},
	beforeDestroy() {
		let dom = document.getElementsByTagName("html");
		dom = dom[0] || dom;
		if (dom) dom.setAttribute("style", "");
	},
	mounted() {
		document.addEventListener("UniAppJSBridgeReady", function () {});
		this.initPage();
	},
	methods: {
		initPage() {
			const {
				id = "68",
				token = "daa08c1589fd40b3bb41580353230890",
				type = "",
			} = this.$route.query;
			this.type = type || "";
			this.$quinn.setStorage("token", token);
			this.$api.orderDetail({ id }, { ignore: true }).then((res) => {
				const data = res?.result || {};
				this.orderInfo = data;
				this.fee = data.fee || 0;
			});
			this.$api.getOrderQuotation({ id }, { ignore: true }).then((res) => {
				this.orderList = res?.result || [];
			});
			this.$api.getQuoteMaterials({ id }, { ignore: true }).then((data) => {
				if (data.code == 0) this.quoteList = data?.result || [];
			});
		},
		exportExcel(e) {
			const { id, orderName = "出库单" } = this.orderInfo;
			this.$api.getQuoteMaterials({ id }, { ignore: true }).then((res) => {
				if (res.code != 0) return;
				res = res.result || [];
				if (!res.length) return this.$message("暂无相关出库单");
				else {
					const excel = this.$quinn.exportExcel({
						data: res || [],
						type: 'blob',
						defaultTitle: orderName || "出库单",
					});
					console.log(excel);
					this.$api
						.upload({
							file: excel,
						})
						.then((res) => {
							const fileUrl = this.$imgHost + res;
							console.log("fileUrl", fileUrl);
							uni.postMessage({
								data: {
									file: fileUrl,
								},
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1);
						})
						.catch((e) => {
							console.log("upload", e);
						});
				}
			});
		},
		onExport() {
			const html = document.getElementById(this.id);
			this.loading = true;
			html2Img({
				html,
				scale: 1,
				type: "file",
			})
				.then((file) => {
					// console.log(file);
					this.$api
						.upload({
							file,
						})
						.then((res) => {
							const imgUrl = this.$imgHost + res;
							console.log("imgUrl", imgUrl);
							uni.postMessage({
								data: {
									imgUrl,
								},
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1);
						})
						.catch((e) => {
							console.log("upload", e);
						});
				})
				.catch((e) => {
					console.log("html2img-error", e);
				})
				.finally((e) => {
					setTimeout(() => {
						this.loading = false;
					}, 100);
				});
		},
	},
};
</script>

<style lang="less" scoped>
.quote-wrap {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	.content-wrap {
		flex: 1;
		overflow-y: auto;
	}
	.btn-wrap {
		padding: 15rem 30rem 40rem;
		display: flex;
		align-items: center;
		.btn {
			flex: 1;
			height: 90rem;
			background: #409eff;
			color: white;
			border-radius: 90rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 30rem;
		}
	}
	.total-wrap {
		display: flex;
		flex-direction: column;
		padding: 25rem;
		.p1 {
			padding-right: 25rem;
		}
	}
	.quote-main {
		padding: 30rem 0 50rem;
	}

	.table-wrap {
		padding: 15rem;
		background: white;
		border-radius: 20rem;
		font-size: 28rem;
		line-height: 32rem;
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;

		.header {
			background: #f3f3f3;
			border-radius: 20rem 20rem 0 0;
			color: #777777;
			width: 100%;
			overflow-x: auto;
			font-weight: 500;
			pointer-events: none;

			.row {
				.cell {
					border: none !important;
				}
			}
		}

		.row {
			width: 100%;
			min-height: 90rem;
			display: flex;
			overflow: hidden;

			.cell {
				border-right: 1rem solid #ddd;
				border-bottom: 1rem solid #ddd;
				padding: 0 20rem;
				// flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;

				.text {
					word-break: break-all;
				}

				.val {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&:last-of-type {
					border-right: none;
				}
				&.f2 {
					flex: 2;
				}

				&.f3 {
					flex: 3;
				}

				&.f4 {
					flex: 4;
				}
			}
		}

		.body {
			border-radius: 0 0 12rem 12rem;
			overflow-y: hidden;
			overflow-x: auto;
			border: 1rem solid #ddd;
		}
	}
}
</style>

